<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Template配置详解</title>
    <!--安装vue-->
    <script src="js/vue3.js"></script>
</head>
<body>
<!--指定挂载位置-->
<div id="app">
      <h1>{{message}}</h1>
</div>

<!--vue程序-->
<script>
    const { createApp, ref } = Vue

    createApp({
        setup() {
            const message = ref('Hello vue!')
            return {
                message
            }
        }
    }).mount('#app')


    //Vue.config是Vue的全局配置对象
    //productionTip属性可以设置是否生成生产信息提示
    //默认:true.如果是false则表示阻止生成提示信息
    // Vue.config.productionTip = false
    // // //配置是否允许 vue-devtools检查代码,开发版本为true，生产版本默认为false,生产版本可以设置为true可以启用检查
    // Vue.config.devtools = true

    /**
     * 关于template配置项
     *      1.template后面指定的是模版语句,但是模版语句中只能有一个根节点
     *      2.只要data中的数据发生变化,模版语句一定会重新编译.(只要data改变,template就会重新编译,重新渲染)
     *      3.如果使用template配置项的话,指定挂载位置的元素会被替换
     *      4.好消息:目前我们可以不使用template来编写模版语句，这些模版语句可以直接写到html标签中，Vue框架能找到并编译
     *          然后渲染
     *      5.如果直接将模版语句编写到HTML标签中,指定的挂载位置就不会被替换了
     * 关于$mount('#app')?
     *      也可以不使用$mount('#app')的方式进行挂载了
     *      在Vue中有一个配置项:el
     *      el配置项和$mount()可以达到同样的效果
     *      el配置项的作用?
     *          告诉Vue实例去接管哪个容器
     *          el : '#app',表示让Vue实例去接管id='app'的容器
     *      el其实就是element的缩写,被翻译为元素
     */


    //
    // new Vue({
    //     // template : `<div>
    //     //               <h1>{{message}}</h1>
    //     //               <h1>{{name}}</h1>
    //     //             </div>`,
    //     data : {
    //         ccc : 'abc',
    //         ddd : 'abc',
    //     },
    //     //el 是 element单词的缩写,翻译为"元素",el配置项主要是用来指定Vue实例关联的容器
    //     //也就是说Vue所管理的容器是哪个
    //     el : '#app'
    // })
        // .$mount('#app')
</script>
</body>
</html>